<template>
  <el-container direction="vertical">
    <!-- 自定义页头 -->
    <Header />
    <el-main>
      <div class="block">
        <el-carousel height="500px">
          <el-carousel-item v-for="(item,index) in list" :key="index">
            <el-row><el-col :span="16"><img :src="item.news_img" alt="" width="100%" /></el-col>
              <el-col :span="8"> <el-card class="box-card" style="height: 500px;">
                  <h1 @click="getNewId(item.news_id)">{{ item.digest }}</h1>
                  <h3>{{ item.news_title }}</h3>
                  <!-- <h3 style="margin-left: 300px">编辑：小潘潘</h3> -->
                </el-card></el-col></el-row>
          </el-carousel-item>
        </el-carousel>
      </div>
      <el-row>
        <el-col style="text-align: center">
          <h1 style="color: rgb(182, 17, 27); padding: 15px 0px">热门排行</h1>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7" class="top">
          <HomeTop :list='newslist.slice(10, 20)' />
        </el-col>
        <el-col :span="7" class="top">
          <HomeTop :list="newslist.slice(30, 40)" />
        </el-col>
        <el-col :span="7" class="top">
          <HomeTop :list='newslist.slice(50, 60)' />
        </el-col>
      </el-row>
      <el-row>
        <el-col style="text-align: center">
          <h1 style="color: rgb(182, 17, 27); padding: 15px 0px">最新发布</h1>
        </el-col>
      </el-row>

      <el-row v-for="(item,index) in itemData" :key="index">
        <el-col :span="6">
          <img :src="item.news_img" style="height: 250px;width: 100%;">
        </el-col>
        <el-col :span="18">
          <el-card class="box-card" style="height: 250px;">
            <h1 @click="getNewId(item.news_id)">{{ item.news_title }}</h1>
            <span>{{ item.digest }}</span><br><br><br>
            <span style="color: gray;">发布者：{{ item.source }}</span><br><br>
            <span style="color: gray;">发布时间：{{ item.post_date }}</span>

          </el-card></el-col>
      </el-row>

    </el-main>
    <!-- 自定义页脚 -->
    <Footer />
  </el-container>
</template>
<script>
import Footer from "../components/Footer.vue";
import Header from "../components/Header.vue";
import HomeTop from "../components/HomeTop.vue";
export default {
  data() {
    return {

      list: '',
      newslist: "",
      itemData:"",
    };
  },
  components: {
    Footer,
    Header,
    HomeTop,
  },
  async created() {
    // console.log(axios);

    try {
      const res = await this.axios.get(
        "http://localhost:3000/news/getHomeNews"
      );
      this.list = res.data.data.slice(0,5);
      this.newslist = res.data.data;
      // console.log(res.data.data.slice(0,5));
    } catch (err) {
      console.log(err);
    }
    this.axios.get(`http://localhost:3000/news/renderAddNews`)
      .then(res => {
        // 请求成功时，处理返回的数据  
        this.topImg=res.data.data[8];
        this.itemData = res.data.data.slice(0,11);
        // this.itemImg = res.data.news_img
        // console.log(this.itemData);
      })
      .catch(error => {
        // 请求失败时，处理错误  
        console.error(error);
      });
  },
  methods: {

    //       // this.itemImg = res.data.news_img
    //       console.log(this.itemData);
    //     })
    //     .catch((error) => {
    //       // 请求失败时，处理错误
    //       console.error(error);
    //     });
    // },
        getNewId(id) {
      // console.log(id);
      this.$router.push(`/detailPage/${id}`);

    }
  },
};
</script>
<style scoped>
.el-carousel__item {
  color: #475669;
  /* font-size: 18px; */
  opacity: 1;
  line-height: 50px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.top {
  margin-left: 50px;
}

/* .el-main{ */
/* background-color: #ffffff; */
/* background:repeating-linear-gradient(to bottom,rgb(123, 155, 161),rgb(202, 215, 215)); */
/* } */

h1:hover {
  color: rgb(193, 1, 1);
}
</style>
